// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Vuex from 'vuex'
// import Login from './components/login'
import App from './App'
import createRouter from './router/route'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import createStore from './store/store'
import QRCode from 'qrcodejs2'
import Notification from './component/notification/index.js'
import axios from 'axios'
import QS from 'qs'
import Cookies from 'js-cookie'
import * as filters from '@/filters/index'
import VueAMap from 'vue-amap'

import commit from './utils/globalCommit'
// import mutations from './store/mutations/mutations'
import HappyScroll from 'vue-happy-scroll'
// 引入css
import 'vue-happy-scroll/docs/happy-scroll.css'
// 自定义指令
// import '@/components/home/fruit/customize/cus/copy.js'

// 初始化过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})
// https://blog.csdn.net/lander_xiong/article/details/79018737 --- 也可以定义bus.js文件
// https://www.imooc.com/article/257885
Vue.prototype.bus = new Vue()
Vue.prototype.$axios = axios
Vue.prototype.qs = QS
// https://blog.csdn.net/ai1362425349/article/details/82119889

Vue.use(HappyScroll)
Vue.config.productionTip = false
Vue.prototype.commit = commit // 全局公共js引入https://www.cnblogs.com/CinderellaStory/p/11512274.html
Vue.prototype.$qrCode = QRCode // https://www.cnblogs.com/ajuan/p/10100931.html#_label0_1
Vue.use(VueRouter)
Vue.use(ElementUI)
Vue.use(Vuex)
Vue.use(Notification) // 引入全局组件
// Vue.use(QRCode)
// Vue.use(Cookies)
Vue.prototype.$cookie = Cookies

const router = createRouter()
const store = createStore()

Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: '07f196dadf1a2bb3adb19c83a1f254c6',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  v: '1.4.4'
})
// 动态模块的注册
// store提供动态注册一个模块的功能,vuex提供了这个功能
store.registerModule('cc', {
  state: {
    text: 333
  }
})
// store.unregisterModule('cc') 解绑一个modules

// 第一个参数是一个方法，第二个参数也是方法（第一个方法返回值有变化的时候才出发第二个方法）
// store.watch((state) => state.count + 1, (newCount) => {
//   console.log('new count watched:', newCount)
// })

// 下面的2个API用在vuex的插件里面--监听mutations和action（多用于监听插件）
// 订阅：拿到所有mutations的变化，任一mutations变化就会回调下面的方法
// store.subscribe((mutation, state) => {
//   console.log(mutation.type) // 调的那个mutations
//   console.log(mutation.payload) // mutations变化接收到的参数
// })
// 拿到所有action的变化，任一action变化就会回调下面的方法--同上
// store.subscribeAction((action, state) => {
//   console.log(action.type)
//   console.log(action.payload)
// })

// 全局守卫导航钩子
router.beforeEach((to, from, next) => { // 每次路由守卫跳转的时候触发这个钩子
  // console.log('before each invoked')
  next() // 执行next()路由才会真正的跳转
  // 在这里可以做校验之类的，比如一些页面需要用户登录才显示的
  // if (to.fullPath === '/login') { // 如果跳转的是login页面就跳，否则不跳转，则后面的钩子也不会进入
  //   next('/login') // 如果没有登录就直接进入登录页面
  //   next({ path: '/login' }) // 可以是个对象，多个参数
  // } else {
  //   next() // 登陆过就直接进入
  // }
  // 修改项目title
  // const t = to.meta.title || 'dylan'
  // window.document.title = t
  // document.title = t
  commit.title(to.meta.title)
})
router.beforeResolve((to, from, next) => { // 每次路由守卫跳转后触发这个钩子
  // console.log('before resolve invoked')
  next() // 执行next()路由才会真正的跳转
})
router.afterEach((to, from) => { // 每次导航跳转了之后，跳转之后不需要next
  // console.log('after resolve invoked')
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  // QRCode,
  components: { App },
  template: '<App/>'
})
